import React, { memo, useState } from 'react'

function Input(props: any) {
  return <input {...props} />
}

function CustomizeInput({ value = '', addonAfter, allowClear = true, ...props }: any) {
  const [show, setShow] = useState(false)
  return <div style={{ flex: 1, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
    <div style={{ position: 'relative', flex: 1 }}>
      <Input onFocus={() => {
        if (allowClear) {
          setShow(true)
        }
      }}
      onBlur={() => {
        setShow(false)
      }}
      value={value} style={{ padding: '12px 10px', background: '#f2f2f2', borderRadius: '8px' }} {...props} />
      {
        show && allowClear
          ? <span style={{ position: 'absolute', right: '10px', top: '7px', padding: '5px', cursor: 'pointer' }} onClick={(e) => {
            props.onChange('')
            setShow(false)
          }}>
            <svg style={{ width: '10px', height: '10px' }} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 13 12" className="w-[0.8em] text-gray-700"><path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M11.565 1.22l-9.992 9.54M11.567 10.766l-10-9.55"></path></svg>
          </span>
          : null
      }
    </div>
    {
      addonAfter
        ? <div style={{ padding: '0 10px' }}>
          {addonAfter}
        </div>
        : null
    }

  </div>
}

export default memo(CustomizeInput)
